/*
 *@description:标签页组件
 *@Author:@reynold
 *@Date:2025-03-22 11:05:15
 *@Update:2025-03-22 11:05:15
 *@Version: V1.0.0
*/
<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="orderNum"
        label="订单编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="orderTime"
        label="下单时间">
      </el-table-column>
      <el-table-column
        prop="price"
        label="总价">
      </el-table-column>
      <el-table-column
        label="状态">
        <template slot-scope="scope">
          <el-tag  v-if="scope.status" type="success">待派单</el-tag>
          <el-tag  v-else type="warning">待接单</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="customId"
        label="顾客ID">
      </el-table-column>
      <el-table-column
        prop="employeeId"
        label="员工ID">
      </el-table-column>
      <el-table-column
        label="操作"
        width="160">
          <slot name="operate"></slot>
          <!-- <slot name="operate" :data=""></slot> -->
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageQuery.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageQuery.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  props:['data'],
  data(){
    return{
      pageQuery:{
        pageSize:10,
        pageNum:1
      },
      total:100,
      currentPage: 4,
      tableData: [{
        orderNum:'1231',
        orderTime: '2016-05-02',
        price:1230,
        status:true,
        customId:'456',
        employeeId:'987'
      }]
    }
  },
  methods:{
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
  }
}
</script>

<style lang="less" scoped>

</style>